<template>
  <div class="guide-banner">
    <div class="container">
      <div class="inner-one">
        <div class="inner-content">
          <div class="tp1"></div>
          <div class="title-one">创建空白问卷</div>
          <div class="title-two">从一份空白问卷开始创建</div>
          <a class="button" href="">开始</a>
        </div>
      </div>

      <div class="inner-two">
        <div class="inner-content">
          <div class="tp2"></div>
          <div class="title-one">选择问卷模板</div>
          <div class="title-two">使用腾讯问卷提供的专业模板</div>
          <a class="button" href="">开始</a>
        </div>
      </div>

      <div class="inner-three">
        <div class="inner-content">
          <div class="tp3"></div>
          <div class="title-one">文本编辑问卷</div>
          <div class="title-two">自由编辑文本自动生成问卷</div>
          <a class="button" href="">开始</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.guide-banner {
  margin-top: 61px;
}
.container {
  height: 450px;
  display: flex;
  justify-content: space-between;
}
.inner-one {
  width: 634.992px;
  height: 450px;
  background-color: rgba(46, 140, 219, 0.95);
  flex-grow: 1;
}
.inner-two {
  width: 634.992px;
  height: 450px;
  background-color: rgba(71, 157, 230, 0.94);
  flex-grow: 1
}
.inner-three {
  width: 634.992px;
  height: 450px;
  background-color: rgba(144, 214, 126, 0.94);
  flex-grow: 1
}

.tp1 {
  width: 154px;
  height: 152px;
  background: url('https://cdn.ur.qq.com/image/pc/sprites_bg.png?v=1.9.80') no-repeat;
  transform: scale(0.72);
  background-position: -232px 0px;
  margin: 60px auto 10px;
}

.tp2 {
  width: 231px;
  height: 157px;
  background: url('https://cdn.ur.qq.com/image/pc/sprites_bg.png?v=1.9.80') no-repeat;
  background-position: 0px 0px;
  transform: scale(0.7);
  margin: 60px auto 10px;
}

.tp3 {
  width: 189px;
  height: 162px;
  background: url('https://cdn.ur.qq.com/image/pc/sprites_bg.png?v=1.9.80') no-repeat;
  background-position: 0px -158px;
  transform: scale(0.68);
  margin: 60px auto 10px;
}

.inner-content {
  height: 308px;
  text-align: center;
}

.title-one {
  font-size: 24px;
  color: #fff;
}

.title-two {
  font-size: 18px;
  color: #fff;
}

.button {
  display: inline-block;
  width: 105px;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  border-radius: 3px;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  margin-top: 38px;
}

.button:hover {
  background-color: #fff;
  color: rgba(71, 157, 230, 0.94);
}

</style>
